<template>
	<view>
		<uni-nav-bar fixed="true" title="修改资料" backgroundColor="#f5f5f5" height="120rpx" @clickLeft="back"
			statusBar="true">
			<view slot="left">
				<uni-icons type="back" size="30"></uni-icons>
			</view>
			<view slot="right">
				<view class="save" @click="save = true">
					保存
				</view>
			</view>
		</uni-nav-bar>
		<view class="body">
			<image :src="user.avatar" mode="aspectFill" class="avatar" @click="selectImg"></image>
			<view class="tip" @click="selectImg">点击修改头像</view>
		</view>
		<u-cell-group :border="false">
			<u-cell :value="user.uid">
				<text slot="title" class="card">ID</text>
			</u-cell>
			<u-cell isLink :value="user.username" @click="edit_username = true">
				<text slot="title" class="card">昵称</text>
			</u-cell>
			<u-cell isLink :value="gender[user.gender].name" @click="edit_gender = true">
				<text slot="title" class="card">性别</text>
			</u-cell>
		</u-cell-group>
		<u-modal :show="edit_username" title="修改昵称" @confirm="edit_username = false" width="500rpx">
			<view class="">
				<u-input :maxlength="12" v-model="user.username"></u-input>
			</view>
		</u-modal>
		<u-action-sheet :actions="gender" title="修改性别" :show="edit_gender" :closeOnClickOverlay="true" round="20"
			@select="change_gender">
		</u-action-sheet>
		<u-modal :show="save" title="温馨提示" content="是否保存信息修改?" width="500rpx" @confirm="update" @cancel="save = false"
			showCancelButton>
		</u-modal>
	</view>
</template>

<script>
	import config from "@/config/config.js"
	export default {
		data() {
			return {
				gender: [{
					name: "男",
					value: 0
				}, {
					name: "女",
					value: 1
				}, {
					name: "保密",
					value: 2
				}],
				edit_username: false,
				edit_gender: false,
				save: false,
				user: JSON.parse(JSON.stringify(this.$store.state.user)),
			}
		},
		methods: {
			selectImg() {
				let self = this
				uni.chooseImage({
					count: 1,
					sourceType: ['album'],
					success(res) {
						// console.log(JSON.stringify(res.tempFilePaths))
						self.uploadImg(res.tempFilePaths[0])
					}
				})
			},
			uploadImg(imgpath) {
				this.$util.uploadFile(imgpath).then(res => {
					this.user.avatar = res
				}).catch(err => {
					uni.showToast({
						icon: 'error',
						title: "头像上传失败"
					})
				})
			},
			update() {
				this.$request.TokenRequest({
					url: "/user/updateUserInfo"
				}, this.user).then(res => {
					if (res.state === 200) {
						uni.showToast({
							icon: "success",
							title: "修改成功!"
						})
						this.$store.state.user = this.user
						this.$store.commit("storeUser")
						this.save = false
					} else {
						uni.showToast({
							icon: "none",
							title: res.message
						})
					}
				})
			},
			change_gender(e) {
				// console.log(e)
				this.user.gender = e.value;
				this.edit_gender = false;
			},
			back() {
				uni.navigateBack({})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.body {
		text-align: center;
	}

	.avatar {
		width: 200rpx;
		height: 200rpx;
		margin-top: 100rpx;
		border-radius: 50%;
	}

	.tip {
		font-size: 30rpx;
		margin: 40rpx 0;
		color: #82878B;
	}

	.card {
		font-size: 35rpx;
		padding: 10rpx 0;
	}

	.save {
		background-color: #42A5F5;
		color: #FFFFFF;
		font-size: 30rpx;
		padding: 5rpx 14rpx;
		border-radius: 10rpx;
	}
</style>
